<template>
  <div class="nav">
    <el-scrollbar>
      <el-menu  default-active="2"  class="el-menu-vertical-demo"  @open="handleOpen"  @close="handleClose"  background-color="#545c64"  text-color="#fff"  active-text-color="#ffd04b" @select="selectMenu">
        <el-submenu index="#User">
          <template slot="title"><i class="el-icon-user"></i><span>用户相关</span></template>
          <el-menu-item-group>
            <el-menu-item index="#">会员列表</el-menu-item>
            <el-menu-item index="#AgencyList">代理列表</el-menu-item>
            <el-menu-item index="#PayRank">充值记录</el-menu-item>
            <el-menu-item index="#PayUser">付费会员卡</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="#Order">
          <template slot="title"><i class="el-icon-collection-tag"></i><span>订单管理</span></template>
          <el-menu-item-group>
            <el-menu-item index="#Orders">自营订单</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="#Equipment">
          <template slot="title"><i class="el-icon-collection-tag"></i><span>设备管理</span></template>
          <el-menu-item-group>
            <el-menu-item index="#Equipment">设备列表</el-menu-item>
            <!-- <el-menu-item index="#PriceList">价格类目</el-menu-item> -->
          </el-menu-item-group>
        </el-submenu>
       <!-- <el-submenu index="#LifeServices">
          <template slot="title"><i class="el-icon-user"></i><span>生活服务</span></template>
          <el-menu-item-group>
            <el-menu-item index="#ServicesList">服务类目</el-menu-item>
            <el-menu-item index="#ArtisanCheck">技工审核</el-menu-item>
            <el-menu-item index="#ArtisanList">技工列表</el-menu-item>
            <el-menu-item index="#Template">模板商品</el-menu-item>
            <el-menu-item index="#WaitingList">待接订单</el-menu-item>
            <el-menu-item index="#Project">项目订单</el-menu-item>
            <el-menu-item index="#Refund">退款订单</el-menu-item>
            <el-menu-item index="#Withdraw">商户提现</el-menu-item>
          </el-menu-item-group>
        </el-submenu> -->
        <el-submenu index="#HongguoLife">
          <template slot="title"><i class="el-icon-user"></i><span>生活服务</span></template>
          <el-menu-item-group>
            <el-menu-item index="#ServiceCategory">服务类目</el-menu-item>
            <el-menu-item index="#ServiceList">服务列表</el-menu-item>
            <el-menu-item index="#UserList1">用户列表</el-menu-item>
            <el-menu-item index="#Banner">活动广告</el-menu-item>
            <el-menu-item index="#HotWord">热词广告</el-menu-item>
            <el-menu-item index="#HotWordTwo">首页热词</el-menu-item>
            <el-menu-item index="#Cell">小区配置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
  export default {
    name: 'SideNav',
    data () {
      return {
        MenuList:[],//菜单列表
      }
    },
    mounted() {},
    methods: {
      // 获取该账户的管理权限下的菜单
      getMenuList(){
        this.$axios.post(this.baseURL+'menu/getMenusByAdminId',{
          "adminId": localStorage.getItem('id'),
          "requestSource":"PC"
        }).then((res)=>{
          // console.log(res,"该管理组菜单列表");
          if(res.data.code==1){
            this.MenuList = res.data.data;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      goTo(path) {
        this.$router.replace(path);
      },
      // 跳转新页面
      gg(indexPath){
        let routeData = this.$router.resolve({
          path: "/" + indexPath[1].replace("#", "")//去掉开头防使用index做router的#符
        });
        window.open(routeData.href, "_blank");
      },
      selectMenu(index, indexPath){
        if (indexPath[0] === "#Index") {
          this.gg(indexPath);
        }
        if (indexPath[0] === "#User") {
          this.gg(indexPath);
        }
        if (indexPath[0] === "#Order") {
          this.gg(indexPath);
        }
        if (indexPath[0] === "#Equipment") {
          this.gg(indexPath);
        }
        if (indexPath[0] === "#LifeServices") {
          this.gg(indexPath);
        }
        if (indexPath[0] === "#HongguoLife") {
          this.gg(indexPath);
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .nav{
    width: 150px;
    height: calc(100vh - 50px);
    background-color: #545c64;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1000;
    .el-menu{
      border-right: none;
      .menu1 >>> .el-submenu__icon-arrow{
        display: none;
      }
    }
    >>> .el-menu-item-group__title{
      padding: 0!important;
    }
    >>>.el-menu-item{
      font-size: 14px;
      color: #CFCFCF!important;
    }
    >>> .el-scrollbar__thumb{
      width: 100%;
    }
  }
</style>
